<!DOCTYPE HTML>
<html>

<head>
   <title>运费模版管理</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>运费模版管理
               <button id="add-new-btn" class="jx-btn btn-default pull-right">添加运费模版</button>
            </h4>
         </div>
         <div class="detail-section">
            <div class=" detail-row">
               <div class=" ">
                  <!-- 表格 start-->
                  <div id="grid"></div>
                  <!-- 表格 end-->
               </div>
            </div>
         </div>
      </div>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script type="text/javascript">
      $("#add-new-btn").click(function () {
         top.topManager.openPage({
            id: 'add-new-btn',
            href: 'templates/system-settings/freight-template/add-freight-template.html',
            title: '添加运费模板'
         });
      });
      BUI.use(['bui/grid', 'bui/data', 'common/search'], function (Grid, Data, Search) {
         var Grid = Grid,
            enumObj = {
               "1": "待发货",
               "2": "已发货"
            },
            Store = Data.Store,
            columns = [{
                  title: '模版名称',
                  dataIndex: 'a',
                  elCls: 'center', //居中
                  width: 200,
               }, {
                  title: '最后编辑时间',
                  elCls: 'center',
                  dataIndex: 'b',
                  width: 200
               },


               {
                  title: '操作',
                  dataIndex: 'f',
                  elCls: 'center',
                  width: 200,
                  renderer: function (value, obj) {
                     var editStr = Search.createLink({ //链接使用 此方式
                           id: 'edit' + obj.id,
                           title: '添加运费模板',
                           text: '[ 编辑 ] ',
                           href: 'templates/system-settings/freight-template/add-freight-template.html'
                        }),
                        delStr = '<span class="grid-command btn-del">[ 删除 ]</span>'; //页面操作不需要使用Search.createLink
                     return editStr + delStr;
                  }
               }
            ],
            data = [{
               a: '模版1',
               b: '2016-08-18 15:18',
               detail: {}
            }];

         // 实例化 Grid.Plugins.Cascade 插件
         var cascade = new Grid.Plugins.Cascade({
            renderer: function (record) {
               console.log(record)
               var str = '<table class="jx-table ">' +
                  '           <thead>' +
                  '              <tr>' +
                  '               <td class="type1"> 可配送区域</td>' +
                  '               <td class="type1" > 首件（个）</td> ' +
                  '               <td class="type1" > 运费（元） </td> ' +
                  '               <td class="type1" > 续件（个）</td> ' +
                  '               <td class="type1" > 续费（元）</td> ' +
                  '              </tr>' +
                  '           </thead>' +
                  '     <tbody>' +
                  '        <tr>' +
                  '          <td class="td-area">北京市</td>' +
                  '          <td> 1	 </td>' +
                  '          <td> 10 </td>' +
                  '          <td> 1  </td>' +
                  '          <td> 15 </td>' +
                  '      </tr>' +
                  '     <tbody>'
               return str;
               //  return '<div style="padding: 10px 20px;"><h2>详情信息</h2><p>' + record.detail + '</p></div>';
            }
         });
         //初始化数据
         var isAddRemote = false,

            store = new Store({ //初始化数据
               data: data,
               autoLoad: true, //自动加载数据
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               loadMask: true, //加载数据时显示屏蔽层
               forceFit: true,
               // 底部工具栏
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               plugins: [cascade], //插件
               store: store
            });

         grid.render();
         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
               delFunction(item, itemEl);

            }

         });


         //没有多选插件，删除选中的记录
         function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function () {
               var input = itemEl.find('input'),
                  name = itemEl.attr('name');
               if (name) {
                  form.getField(name).remove();
               }

               store.remove(item);
            }, 'question');
         }


      });
   </script>
   <!-- script end -->

   <body>

</html>